<template>
  <li class="media-item">
    <div class="media-item__thumb">
      <img :src="data.cover">
    </div>
    <div class="media-item__content">
      <h1 class="media-item__title">
        <router-link :to="`/article/${data.id}`">{{data.title}}</router-link>
      </h1>
      <p class="item-description">{{data.abstract}}</p>
      <div class="media-item__meta">
        {{data.keywords}}
      </div>
    </div>
  </li>
</template>

<script>
export default {
  name: 'MediaItem',
  props:{
    data: {
      type: Object,
      default: () =>({})
    }
  }
}
</script>
